<template>
    <view class="cont">
        <u-navbar :placeholder="true" :safeAreaInsetTop="true" bgColor="#FFF" titleStyle="color:#000">
            <view class="u-nav-slot" slot="center">交易明细详情</view>
            <view class="config_bar" slot="left" @click="goBack">返回</view>
        </u-navbar>
        <view class="list-container">
            <view class="list-item" v-for="(item, index) in list" :key="index">
                <view class="item-left">
                    <view class="type">
                        <image :src="payTypeFormat(item.payType, true)"></image>
                        <text>{{ item.payTypeName}}</text>
                    </view>
                    <view class="date">
                        <text>{{ item.createdDate }}</text>
                    </view>
                </view>
                <view class="item-right">
                    <view class="amount">
                        <text>¥{{ item.amt }}</text>
                    </view>
                    <view class="amount-type">
                        <text>{{ statusFormat(item.status) }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view v-show="isLoadding">
            <uni-load-more iconType="circle" :status="status" />
        </view>
    </view>
</template>
<script>
import {
    getPayOrderDetail
}
    from '@/common/yftx-api.js';
export default {
    data() {
        return {
            goBack() {
                uni.navigateBack({
                    delta: 1
                });
            },
            isLoadding: false,
            status: 'noMore',
            queryData: {
                pageNum: 1,
                pageSize: 10
            },
            list: []
        }
    },
    methods: {
        getData(queryData) {
            this.isLoadding = true
            getPayOrderDetail(queryData).then(res => {
                console.log(res);
                if (res && res.code === 200) {
                    if (res.rows && res.rows.length > 0) {
                        res.rows.forEach(item => {
                            this.list.push(item)
                        })
                    } else {
                        this.status = 'noMore'
                    }
                } else {
                    this.list = []
                }
            })
        },
        statusFormat(key) {
            let types = {
                0: '未支付',
                1: '已支付',
                2: '线下退款',
                3: '线上退款',
                4: '支付失败'
            }
            return types[key] ?? ''
        },
        payTypeFormat(key, isImg = false) {
            let types = {}
            if (!isImg) {
                types = {
                    dzk: '电子卡',
                    wx: '微信',
                    zfb: '支付宝'
                }
            } else {
                types = {
                    dzk: '../../static/img/dzk.png',
                    wx: '../../static/img/WeChat.png',
                    zfb: '../../static/img/Alipay.png'
                }
            }
            return types[key] ?? ''
        }
    },
    onLoad(options) {
        let delArr = ['beginTime', 'endTime', 'oilPersonnelId', 'pageNum', 'pageSize']
        const item = decodeURIComponent(options.item);
        this.queryData = Object.assign(JSON.parse(item), this.queryData)
        for (let key in this.queryData) {
            if (!delArr.includes(key)) {
                delete this.queryData[key]
            }
        }
        console.log(this.queryData);
        this.getData(this.queryData)
    },
    onReachBottom() {
        this.queryData.pageNum++
        this.getData(this.queryData)
    }
}
</script>
<style lang="scss" scoped>
.cont {
    box-sizing: border-box;

    .list-container {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20upx;
        margin-top: 20upx;

        .list-item {
            display: flex;
            height: 150upx;
            padding: 10upx;
            border: 1px solid #ebeef5;
            border-radius: 20upx;
            box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
            margin-bottom: 20upx;

            .item-left {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin-left: 10upx;

                .type {
                    flex: 1;
                    display: flex;
                    align-items: center;

                    text {
                        margin-left: 28upx;
                        vertical-align: super;
                    }

                    image {
                        width: 42px;
                        height: 40px;
                    }
                }

                .date {
                    flex: 1;
                    display: flex;
                    align-items: center;
                }
            }

            .item-right {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin-right: 10upx;

                .amount {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;

                    text {
                        color: #fb6703;
                        font-size: 45upx;
                        font-weight: 600;
                    }
                }

                .amount-type {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                }
            }
        }
    }
}</style>
